<template>
	<view class="wrap">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<swiper class="swiper-box" :current="current" circular :autoplay="!item.video" indicator-dots indicator-color="#FFF" :indicator-active-color="themeColor.color" @change="swiperChange" v-if="item.images.length || item.video">
				<swiper-item v-if="item.video">
					<video id="myVideo" :src="item.video" controls objectFit="contain"></video>
				</swiper-item>
				
				<swiper-item v-for="(image, index) in item.images" :key="index">
					<uv-image :src="image" width="100%" :height="300" mode="aspectFill" @tap="previewImage" /> 
				</swiper-item>
			</swiper>

			<view class="subwrap">
				<view class="title">{{item.cate_name}} | {{item.title}}</view>
				
				<view class="info">
					<view class="datetime">{{item.updated_at | datetime}}</view>
					<view class="view">{{item.view}}查看</view>
					<view class="like">{{item.like}}赞</view>
					<view class="share">{{item.share}}转发</view>
				</view>
				
				<uv-line />
				
				<uv-gap :height="15" />
				
				<view class="subtitle">
					<view class="line" :style="{ background: themeColor.color }" />
					帖子正文
				</view>
				
				<view class="content">{{item.content}}</view>
			</view>
			
			<uv-gap :height="15" />
			
			<view class="subwrap">
				<uv-gap :height="15" />
				
				<view class="subtitle">
					<view class="line" :style="{ background: themeColor.color }" />
					发布人
				</view>
				
				<view class="user">
					<view class="left"><uv-avatar :src="item.member.head_portrait" :size="60" /></view>
					
					<view class="right">
						<view class="nickname">
							{{item.member.nickname}}

							<view class="level" @tap="navTo('/pages/user/account/level')" v-if="item.memberLevel">
								(
									{{item.memberLevel.name || '候补志愿者'}}
									<uv-icon name="level" :color="themeColor.color" :size="12" />
									<text :style="{ color: themeColor.color }">{{item.member.current_level}}</text>
							  )
							</view>
						</view>

						<view class="profile">
							<uv-icon name="man" color="#1684FB" :size="15" v-if="item.member.gender == 1" />
							<uv-icon name="woman" color="#DE3E96" :size="15" v-if="item.member.gender == 2" />
							<text v-if="item.member.birthday">{{item.member.age_name}}岁</text>
							<text v-if="item.member.birthday">{{item.member.astro}}</text>
							<text v-if="item.member.last_time">{{item.member.last_time_name}}在线</text>
						</view>
					</view>
				</view>
				
				<uv-line v-if="item.member.mobile" />
				
				<view class="contact">
					<view class="contact-item" @tap="makePhoneCall(item.member.mobile)" v-if="item.member.mobile">
						<view class="icon"><uv-icon name="phone-fill" :color="themeColor.color" :size="33" /></view>
						<view class="name">拨打电话</view>
					</view>
					
					<view class="contact-item" @tap="copyText(item.member.weixin)" v-if="item.member.weixin">
						<view class="icon"><uv-icon name="weixin-fill" :color="themeColor.color" size="33" /></view>
						<view class="name">复制微信号</view>
					</view>
					
					<view class="contact-item" @tap="copyText(item.member.qq)" v-if="item.member.qq">
						<view class="icon"><uv-icon name="qq-circle-fill" :color="themeColor.color" size="33" /></view>
						<view class="name">复制QQ号</view>
					</view>
				</view>
			</view>
			
			<uv-gap :height="15" />
			
			<view class="subwrap comments-wrap">
				<uv-gap :height="15" />

				<view class="subtitle">
					<view class="line" :style="{ background: themeColor.color }" />
					最新评论
				</view>
			
				<view class="comments">
					<uv-read-more ref="uvReadMore" close-text="展开全部"	:color="themeColor.color" toggle text-indent="0" :show-height="400">
						<uv-empty text="暂无评论" mode="message" v-if="!item.comments.length"></uv-empty>
						
						<view class="item" v-for="(comment, index) in item.comments" :key="index">
							<view class="left"><uv-avatar :src="comment.member.head_portrait" :size="40" /></view>
							
							<view class="center">
								<view class="nickname">{{comment.member.nickname}}</view>
								<view class="datetime">{{comment.created_at | datetime}}</view>
							</view>
							
							<view class="right">
								<!-- <view class="reply">
									<uv-icon name="thumb-up" :label="comment.reply" color="#999" :size="18" :labelSize="14" />
								</view> -->

								<view class="like" @tap="setPostCommentLike(index, comment.id)">
									<uv-icon name="thumb-up" :label="comment.like" color="#999" :size="18" :labelSize="14"></uv-icon>
								</view>
							</view>
							
							<view class="bottom">
								<view class="content">{{comment.content}}</view>
							</view>
						</view>
					</uv-read-more>
				</view>
			</view>
		</mescroll-body>

		<view class="nav-bottom">
			<view class="left">
				<button class="item" open-type="share" hover-class="none">
					<image src="/static/pet/share.png" />
					<view class="text">转发好友</view>
				</button>
				<view class="item" @tap="getPoster">
					<image src="/static/pet/favorate.png" />
					<view class="text">生成海报</view>
				</view>
				
				<view class="item" @tap="setPostLike">
					<image src="/static/pet/favorate.png" />
					<view class="text">点赞 ({{item.like}})</view>
				</view>
			</view>
			
			<view class="right">
				<uv-button text="我要评论" type="warning" size="medium" shape="circle" ripple :customStyle="{ width: '80%', background: themeColor.color, borderColor: themeColor.color, marginTop: '5rpx' }" @click="comment"></uv-button>
			</view>
		</view>
		
		<painter :widthPixels="720" customStyle="position: absolute; left: -9999rpx;" :palette="palette" @imgOK="onImgOk" @imgErr="onImgErr" v-if="painterShow" />
		
		<uv-modal ref="modal" closeOnClickOverlay confirmText="保存海报"	showCancelButton cancelText="关闭" @confirm="modalConfirm">
			<template v-slot:default>
				<view class="slot-content">
					<image :src="poster" width="100%" height="auto" fade :duration="225" mode="widthFix" />
				</view>
			</template>
		</uv-modal>
		
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<!-- <rf-back-top :scrollTop="scrollTop"></rf-back-top> -->
		<!-- <rf-back-home></rf-back-home> -->
	</view>
</template>

<script>
import moment from '@/common/moment';
import Card from '@/common/card/forum';
import CardNo from '@/common/card/forum-no-poster';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { postView, postLike, postShare, postCommentLike } from '@/api/core';

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			path: '/pages/pet/forum-view',
			hasLogin: false,
			poster: '',
			palette: {},
			painterShow: false,
			downOption: {
				native: true
			},
			upOption: {
				use: false
			},
			current: 0,
			videoContext: {},
			loading: true,
			scrollTop: 0,
			item: {
				title: '',
				cate_name: '',
				content: '',
				member: {
					last_time_name: '刚刚'
				},
				images: [],
				comments: [],
				updated_at: 0
			}
		};
	},
	onLoad(option) {
		if (option.scene) {
			let scene = decodeURIComponent(option.scene);
			let arr = scene.split('=');
			this.id = arr[1];
		} else {
			this.id = option.id ? option.id : this.id;
		}
	},
	onShow() {
		
	},
	onReady() {
		setTimeout(() => {
			this.$nextTick(() => {
				this.$refs.uvReadMore.init();
			});
		}, 1500);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onShareAppMessage(res) {
		this.setShare();

		return { 
			title: '帖子：' + this.item.title,
			imageUrl: this.item.poster,
			path: `${this.path}?id=${this.item.id}`
		};
	},
	mounted() {
		this.initLogin();
	},
	computed: {

	},
	watch: {
		item(val) {
			let params = {
				poster: this.item.poster,
				mpcode: this.item.mpcode,
				title: this.item.cate_name + '：' + this.item.title,
				content: this.item.content
			}
			
			if (this.item.poster) {
				this.palette = new Card().palette(params);
			} else {
				this.palette = new CardNo().palette(params);
			}
		}
	},
	filters: {
		datetime(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm');
		},
	},
	methods: {
		async initLogin() {
			this.hasLogin = this.$mStore.getters.hasLogin;
		},
		navTo(route) {
			this.$mRouter.push({ route });
		},
		swiperChange(e) {
			this.current = e.detail.current;
			
			if (this.item.video) {
				this.videoContext = uni.createVideoContext('myVideo');
		
				if (this.current) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			}
		},
		makePhoneCall(phoneNumber) {
			uni.makePhoneCall({
			  phoneNumber: phoneNumber
			});
		},
		copyText(text) {
			let _this = this;
		
			uni.setClipboardData({
				data: text,
				success(res) {
					_this.$mHelper.toast('复制成功！');
				}
			});
		},
		previewQrcode(url) {
			uni.previewImage({
				urls: [url]
			});
		},
		async setPostLike() {
			if (this.hasLogin) {
				let post_ids = JSON.parse(uni.getStorageSync('post_ids') || "[]");
				
				if (post_ids.includes(this.id)) {
					this.$mHelper.toast('不能重复点赞！');
				} else {
					await this.$http.get(`${postLike}`, {
						id: this.id
					}).then(async r => {
						this.item.like = r.data;
						post_ids.push(this.id);
						uni.setStorageSync('post_ids',  JSON.stringify(post_ids));
					});
				}
			} else {
				this.navToLogin();
			}
		},
		getPoster() {
			this.setShare();
			this.painterShow = true;
		
			if (!this.poster) {
				uni.showLoading({
				  title: '加载中...'
				});
			} else {
				this.$refs.modal.open();
			}
		},
		comment() {
			if (this.hasLogin) {
				this.navTo(`/pages/pet/forum-comment-post?post_id=${this.item.id}`);
			} else {
				this.navToLogin();
			}
		},
		getAstro(month, day) {
		  return '魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯'.substr(month * 2-  (day < '102223444433' .charAt(month - 1) - -19) * 2, 2);
		},
		async downCallback() {
			await this.$http.get(`${postView}?expand=member,comments,comments.member`, {
				id: this.id
			}).then(async r => {
				this.loading = false;
				this.item = r.data;
				
				if (this.item.member.birthday) {
					let birthdays = this.item.member.birthday.split('-');
					let date = new Date();
					let year = date.getFullYear();
					
					this.item.member.age_name = year - birthdays[0];
					this.item.member.astro = this.getAstro(birthdays[1], birthdays[2]) + '座';
				}
				
				this.item.member.last_time_name = this.$uv.timeFrom(this.item.member.last_time, 'yyyy年mm月dd日');
				this.mescroll.endSuccess();
			}).catch(err => {
				this.loading = false;
			});
		},
		async setShare() {
			await this.$http.get(`${postShare}`, {
				id: this.id
			}).then(async r => {
				this.item.share = r.data;
			});
		},
		async setPostCommentLike(index, id) {
			if (this.hasLogin) {
				let comment_ids = JSON.parse(uni.getStorageSync('post_comment_ids') || "[]");
				
				if (comment_ids.includes(id)) {
					this.$mHelper.toast('不能重复点赞！');
				} else {
					await this.$http.get(`${postCommentLike}`, {
						id: id
					}).then(async r => {
						this.item.comments[index].like = r.data;
						comment_ids.push(id);
						uni.setStorageSync('post_comment_ids', JSON.stringify(comment_ids));
					});
				}
			} else {
				this.navToLogin();
			}
		},
		navToLogin() {
			uni.setStorageSync('backToPage', JSON.stringify({ route: `${this.path}?id=${this.item.id}` }));
	
			let _this = this;
			uni.showModal({
				content: '未登录，是否跳转登录页面？',
				success(res) {
					if (res.confirm) {
						_this.navTo(`/pages/public/logintype`);
					}
				}
			});
		},
		onImgOk(e) {
			this.poster = e.detail.path;
			this.$refs.modal.open();
			uni.hideLoading();
		},
		onImgErr() {
			this.$refs.modal.close();
		},
		modalConfirm() {
			let _this = this;
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success() {
					_this.$mHelper.toast('已保存到相册！');
				},
				fail(error) {
					uni.showModal({
						title: '提示',
						content: '须微信授权才能保存到相册！',
						success(res) {
							if (res.confirm) {
								uni.openSetting({
								  success(res) {
								    //console.log(res.authSetting);
								  }
								});
							}
						}
					});
				},
				complete(res) {
					//console.log(res);
				}
			});
		},
		previewImage(index) {
			let urls = this.item.images;
		
			uni.previewImage({
				urls: urls,
				current: index
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $color-white;
	
	.wrap {
		background: #F5F5F5;
		
		.swiper-box {
			height: 500rpx;

			video {
				width: 100%;
				height: 500rpx;
			}
		}
		
		.slot-content {
			image {
				display: block;
			}
		}

		.subwrap {
			background: $color-white;
			padding: 0 30rpx;
			
			.title {
				font-size: 30rpx;
				padding: 40rpx 0 0 0;
			}
			
			.reward {
				color: #EB568F;
				font-size: 24rpx;
				
				.money {
					color: #EB568F;
					font-size: 40rpx;
				}
			}
			
			.feature {
				display: flex;
				
				.left {
					flex-basis: 20%;
				}
				
				.right {
					flex-basis: 80%;
					
					.nickname {
						color: #333;
						font-size: 30rpx;
					}
					
					.base {
						margin-top: 10rpx;
						
						.tag {
							height: 38rpx;
							line-height: 38rpx;
							color: #01040A;
							font-size: 24rpx;
							margin-right: 14rpx;
							background: #FFF2BF;
							border: 2rpx #FFF2BF solid;
							border-radius: 6rpx;
							text-align: center;
							padding: 0 20rpx;
							display: inline-block;
						}
					}
				}
			}
			
			.reward {
				color: #EB568F;
				font-size: 24rpx;
				.money {
					color: #EB568F;
					font-size: 50rpx;
				}
			}
			
			.summary {
				color: #666;
				font-size: 24rpx;
				margin-top: 16rpx;
			}
			
			.info {
				color: #999;
				padding: 20rpx 0 20rpx 0;
				display: flex;
				justify-content: space-between;
				
				.datetime {
					flex-basis: 50%;
					font-size: 22rpx;
				}
				
				.like {
					flex-basis: 14%;
					font-size: 22rpx;
					margin-left: 40rpx;
				}
				.view {
					flex-basis: 18%;
					font-size: 22rpx;
					margin-left: 40rpx;
				}
				
				.share {
					flex-basis: 18%;
					font-size: 22rpx;
					margin-left: 30rpx;
				}
			}
			.sheet {
				color: #999;
				
				.datetime {
					font-size: 24rpx;
				}
				
				.address {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
			
			.user {
				padding: 30rpx 0;
				display: flex;
				
				.left {
					flex-basis: 22%;
				}
				
				.right {
					flex-grow: 1;
					
					.nickname {
						color: #262628;
						font-size: 30rpx;
						display: flex;
						
						.level {
							color: #666;
							margin-left: 10rpx;
							display: flex;

							text {
								font-size: 30rpx;
							}
						}
					}
					
					.profile {
						color: #999;
						font-size: 22rpx;
						margin-top: 10rpx;
						display: flex;

						text {
							padding: 0 20rpx 0 0;
						}
					}
				}
			}
			
			.contact {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-around;
				
				.contact-item {
					text-align: center;
					
					.icon {
						display: flex;
						justify-content: center;
					}
					
					.name {
						color: #666;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
			.subtitle {
				color: #333;
				font-size: 30rpx;
				
				.line {
					width: 6rpx;
					height: 26rpx;
					border-radius: 6rpx;
					display: inline-block;
					margin: 10rpx 16rpx 0 0;
				}
			}
			
			.content {
				line-height: 48rpx;
				color: #666;
				font-size: 30rpx;
				padding: 0 0 40rpx 0;
				margin: 30rpx 0 0 0;
			}
			
			.comments {
				padding: 0 0 60rpx 0;

				.item {
					display: flex;
					flex-wrap: wrap;
					margin: 40rpx 0 0 0;
					
					.left {
						flex-basis: 14%;
					}
					
					.center {
						flex-basis: 76%;
						
						.nickname {
							color: #333;
							font-size: 30rpx;
							margin-top: 6rpx;
						}
						
						.datetime {
							color: #999;
							font-size: 26rpx;
						}
					}
					
					.right {
						flex-basis: 8%;
						text-align: center;
					}
				
					.bottom {
						flex-basis: 100%;
						
						.content {
							color: #000;
							font-size: 26rpx;
							padding: 0 0 0 0;
							margin: 20rpx 0 0 0;
						}
					}
				}
			}
		}
		
		.comments-wrap {
			margin-bottom: 150rpx;
		}
		
		.nav-bottom {
			width: 100%;
			background: #FFF;
			border: 2rpx #F2F2F2 solid;
			position: fixed;
			bottom: 0;
			padding-top: 16rpx;
			padding-bottom: 10rpx;
			padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
			display: flex;
			
			.left {
				flex-basis: 50%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				.item {
					text-align: center;
					image {
						width: 40rpx;
						height: 38rpx;
					}
					
					.text {
						color: #333;
						font-size: 20rpx;
					}
				}
				
				button.item {
					line-height: 44rpx;
					font-size: 28rpx;
					border: 0;
					background: none;
					padding: 0;
					margin: 0;
				}
				
				button:after {
					border: 0;
				}
			}
			
			.right {
				flex-grow: 1;
				text-align: center;
			}
		}
	}
}
</style>
